﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [
	        {
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {  $('#dd').dialog('open');}
	    }, '-', {
	        text: '启用',
	        iconCls: 'icon-ok',
	        handler: function () { alert('ok') }
	    }, '-', {
	        text: '禁用',
	        iconCls: 'icon-cancel',
	        handler: function () { alert('cancel') }
	    }
	    ];
	   $(function(){
	       $('#booklist').datagrid({  
				title:'书籍列表',  
				iconCls:'icon-save',   
				data:{
	"total":50,
	"rows":[
	{"a":"FI-SW-01","b":"Koi","c":10.00,"d":"P","e":36.50,"f":"Large","g":"EST-1","h":"test"},
	{"a":"K9-DL-01","b":"Dalmation","c":12.00,"d":"P","e":18.50,"f":"Spotted Adult Female","g":"EST-10","h":"test"},
	{"a":"RP-SN-01","b":"Rattlesnake","c":12.00,"d":"P","e":38.50,"f":"Venomless","g":"EST-11","h":"test"},
	{"a":"RP-SN-01","b":"Rattlesnake","c":12.00,"d":"P","e":26.50,"f":"Rattleless","g":"EST-12","h":"test"},
	{"a":"RP-LI-02","b":"Iguana","c":12.00,"d":"P","e":35.50,"f":"Green Adult","g":"EST-13","h":"test"},
	{"a":"FL-DSH-01","b":"Manx","c":12.00,"d":"P","e":158.50,"f":"Tailless","g":"EST-14","h":"test"},
	{"a":"FL-DSH-01","b":"Manx","c":12.00,"d":"P","e":83.50,"f":"With tail","g":"EST-15","h":"test"},
	{"a":"FL-DLH-02","b":"Persian","c":12.00,"d":"P","e":23.50,"f":"Adult Female","g":"EST-16","h":"test"},
	{"a":"FL-DLH-02","b":"Persian","c":12.00,"d":"P","e":89.50,"f":"Adult Male","h":"EST-17","h":"test"},
	{"a":"AV-CB-01","b":"Amazon Parrot","c":92.00,"d":"P","e":63.50,"f":"Adult Male","g":"EST-18","h":"test"},
	{"a":"FI-SW-01","b":"Koi","c":10.00,"d":"P","e":36.50,"f":"Large","g":"EST-1","h":"test"},
	{"a":"K9-DL-01","b":"Dalmation","c":12.00,"d":"P","e":18.50,"f":"Spotted Adult Female","g":"EST-10","h":"test"},
	{"a":"RP-SN-01","b":"Rattlesnake","c":12.00,"d":"P","e":38.50,"f":"Venomless","g":"EST-11","h":"test"},
	{"a":"RP-SN-01","b":"Rattlesnake","c":12.00,"d":"P","e":26.50,"f":"Rattleless","g":"EST-12","h":"test"},
	{"a":"RP-LI-02","b":"Iguana","c":12.00,"d":"P","e":35.50,"f":"Green Adult","g":"EST-13","h":"test"},
	{"a":"FL-DSH-01","b":"Manx","c":12.00,"d":"P","e":158.50,"f":"Tailless","g":"EST-14","h":"test"},
	{"a":"FL-DSH-01","b":"Manx","c":12.00,"d":"P","e":83.50,"f":"With tail","g":"EST-15","h":"test"},
	{"a":"FL-DLH-02","b":"Persian","c":12.00,"d":"P","e":23.50,"f":"Adult Female","g":"EST-16","h":"test"},
	{"a":"FL-DLH-02","b":"Persian","c":12.00,"d":"P","e":89.50,"f":"Adult Male","h":"EST-17","h":"test"},
	{"a":"AV-CB-01","b":"Amazon Parrot","c":92.00,"d":"P","e":63.50,"f":"Adult Male","g":"EST-18","h":"test"},
	{"a":"FI-SW-01","b":"Koi","c":10.00,"d":"P","e":36.50,"f":"Large","g":"EST-1","h":"test"}
]
                },
				columns:[
				    [
					{field:'a',title:'名称',width:100,align:'center'},  
					{field:'b',title:'作者',width:200,align:'center'},  
					{field:'d',title:'单价',width:80,align:'center'},  
					{field:'e',title:'ISBN',width:200,align:'center'},  
					{field:'f',title:'出版社',width:200,align:'center'},
	                {field:'g',title:'供货商',width:500,align:'center'},
                    {field:'c',title:'状态',width:100,align:'center'}					
				]
                ],
				toolbar: toolbar,  
				pagination: true,//表示在datagrid设置分页              
               	pageSize: 5,
				singleSelect:true,
                pageList: [5,10,20]
			});

		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                $('#dg').datagrid({ queryParams: form2Json("searchform") });   //点击搜索
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        alert('ok');
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
			});
            
	   });
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>书籍查询：</strong></td>
    <td height="30">
        <input type="text" name="keyword" size=20 placeholder="书籍名称"/>
        <input type="text" name="keyword" size=20 placeholder="ISBN"/>
        <select name="search_type" id="search_type" >
            <option value="-1">请选择出版社</option>
            <option value="be_name" >出版社1</option>
            <option value="be_intro">出版社2</option>
            <option value="be_intro">出版社3</option>
        </select>
        <select name="search_type" id="search_type" >
            <option value="-1">请选择供应商</option>
            <option value="be_name" >供应商1</option>
            <option value="be_intro">供应商2</option>
            <option value="be_intro">供应商3</option>
        </select>
        编辑推荐:<input type="checkbox" name="" value=""/>
        本周精选:<input type="checkbox" name="" value=""/>
    </td>
	<td>
	  <a id="submit_search">搜索</a>
	</td>
  </form>
  <table id="booklist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'书籍名称:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:50%" data-options="label:'单价:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="subject" style="width:50%" data-options="label:'团购价:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="message" style="width:50%;height:60px" data-options="label:'书籍简介:',multiline:true">
            </div>
             <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="message" style="width:50%;height:60px" data-options="label:'作者简介:',multiline:true">
            </div>
             <div style="margin-bottom:20px">
               封面图片:&nbsp;&nbsp;&nbsp;&nbsp; <input  type="file"/>
            </div>
            <div style="margin-bottom:20px">
               编辑推荐:<input type="checkbox" name="" value=""/>
               本周精选:<input type="checkbox" name="" value=""/>
            </div>
            
        </form>
           </div>
    </div>
</body>
</html>